<template>
  <view class="text selfText sound-box" :class="{reverse:!self}" :style="{width:soundBoxWidth}" @click="playSound">
    <text class="sound-time">
      {{ msg.body.time }}''
    </text>
    <view class="sound-icon-box" :class="{rotate:!self}">
      <image v-if="soundPlayState" src="@/uni_modules/uni-im/static/sound-ing.gif" style="width: 18px;height: 18px;"
        mode="widthFix" />
      <uni-im-icons v-else :class="{'sound-icon-active':soundPlayState}" code="e6f5" size="18px" color="#000000" />
    </view>
  </view>
</template>

<script>
  import uniIm from '@/uni_modules/uni-im/sdk/index.js';
  let audioContext = uniIm.audioContext;
  export default {
    data() {
      return {
        soundPlayState: 0
      }
    },
    props: {
      msg: {
        type: Object,
        default () {
          return {
            from_uid: '',
            body: {
              time: 0
            }
          }
        }
      },
      soundBoxWidth: {
        type: String,
        default: '100px'
      }
    },
    computed: {
      self() {
        return this.msg.from_uid === uniIm.currentUser._id
      }
    },
    beforeCreate() {
      audioContext = uniIm.audioContext;
    },
    mounted() {
      this.onPlay = async () => {
        console.log('soundPlayStart------------------',this.msg.body);
        let currentAudioUrl = await uniIm.utils.getTempFileURL(this.msg.body.url)
        let src = audioContext.src
        if (src == currentAudioUrl) {
          this.soundPlayState = 1
        } else {
          this.soundPlayState = 0
        }
      }
      audioContext.onPlay(this.onPlay);
      this.soundPlayEnd = () => {
        // console.log('soundPlayEnd------------------');
        this.soundPlayState = 0
      }
      audioContext.onPause(this.soundPlayEnd);
      audioContext.onStop(this.soundPlayEnd);
      audioContext.onEnded(this.soundPlayEnd);
      audioContext.onError(this.soundPlayEnd);
    },
    destroyed() {
      console.log('unmounted');
      audioContext.offPlay(this.onPlay);
      audioContext.offPause(this.soundPlayEnd);
      audioContext.offStop(this.soundPlayEnd);
      audioContext.offEnded(this.soundPlayEnd);
      audioContext.offError(this.soundPlayEnd);
    },
    methods: {
      async playSound() {
        audioContext.src = await uniIm.utils.getTempFileURL(this.msg.body.url)
        // 下一个事件循环执行
        setTimeout(() => {
          // console.log(78998797,audioContext);
          if (this.soundPlayState === 1) {
            // console.log('播放中，执行关闭');
            audioContext.stop()
          } else {
            audioContext.stop()
            audioContext.play();
          }
        }, 0)
      }
    }
  }
</script>

<style lang="scss">
.sound-box {
  /* #ifdef H5 */
  cursor: pointer !important;
  /* #endif */
  flex-direction: row;
  background-color: #94EB6A;
  height: 44px;
  padding: 10px;
  width: 66px;
  border-radius: 5px;
  justify-content: flex-end;
  align-items: center;
  
  &.reverse {
    flex-direction: row-reverse;
  }
  
  .sound-time {
    font-size: 14px;
    margin: 0 4px;
  }
  
  .sound-icon-box {
    width: 18px;
    height: 18px;
    justify-content: center;
  }
  .rotate {
    transform: rotate(180deg);
  }
  .sound-icon-active {
    transform: option;
    opacity: 10;
    background-color: #007AFF;
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-delay: 0.1s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  }
}
</style>